<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* 内部样式: 在网页内部编写css样式,将css样式写在style标签中 */
			div{
				color: pink;
				font-size: 30px;
				border: 1px solid blue;
			}
		</style>
		<link rel="stylesheet" href="../css/first.css">
		<!--<style>
			@import "../css/first.css";
		</style>-->
	</head>
	<body>
		<!--
			html中编写css样式的三种方式:
				行内样式: 只能装饰一个标签
					<xxx style="css样式:值;css样式:值;"></xxx>
				内部样式:
					在网页内部编写css样式,将css样式写在style标签中
				外部样式: ★
					优点: 将css代码与html代码相分离,可以将css样式多次复用
					a.编写外部的css样式文件  *.css
					b.在使用样式文件的页面中引入
						方式1:
							<link rel="stylesheet" href="../css/first.css">
							rel: 设置引入的文件的类型
							href: css样式文件的路径
						方式2:
			 			@import "css样式文件路径"  : 必须写在style标签内的最上面
			 	优先级:
					行内样式 > 内部样式 或 外部样式
		-->
		<!--
			行内样式: 只能装饰一个标签
				<xxx style="css样式:值;css样式:值;"></xxx>
			【需求一】将下列div设置如下样式：
				1.字体为黄色；
				2.字号为100px；
				3.边框  1px solid red;
		-->
		<div style="color: orange;font-size: 100px;border: 1px solid red;">
			传智播客
		</div>
		<!--
			 内部样式: 在网页内部编写css样式,将css样式写在style标签中
			【需求二】将下列4个div俊均设置如下样式：
				1.字体为黄色；
				2.字号为100px；
				3.边框  1px solid red;
		-->
		<div>黑马程序员</div>
		<div>黑马程序员</div>
		<div>黑马程序员</div>
		<div>黑马程序员</div>
		<!--
			 外部样式:
			 	a.编写外部的css样式文件  *.css
			 	b.在使用样式文件的页面中引入
			 		方式1:
						<link rel="stylesheet" href="../css/first.css">
						rel: 设置引入的文件的类型
						href: css样式文件的路径
			 		方式2:
			 			@import "css样式文件路径"  : 必须写在style标签内的最上面
			【需求三】将下列5个span均设置如下样式：
				1.字体为黄色；
				2.字号为100px；
				3.边框  1px solid red;
		-->
		<span>黑马程序员-span</span>
		<span>黑马程序员-span</span>
		<span>黑马程序员-span</span>
		<span>黑马程序员-span</span>
		<span>黑马程序员-span</span>
	</body>
</html>
